<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双向绑定测试</title>
</head>
<body>
	<button ng-click="increment1">increment1</button>
	<button ng-click="increment2">increment2</button>
	<br><br>
	<input type="text" ng-model="count">
	<span ng-bind="count"></span>
	<span ng-bind="count"></span>
	<span ng-bind="count"></span>
	<script type="text/javascript">
		var count = 0;
		function increment1(i){
			console.log("increment1 - i",i);
			count++;
		}
		function increment2(i){
			console.log("increment2 - i",i);
			count+=2;
		}

		function init(){
			bind();
		}

		function bind(){
			var list = document.querySelectorAll("[ng-click]");
			for(var i = 0; i < list.length; i++){
				list[i].onclick = function() {
					var n = this.getAttribute("ng-click");
					window[n].call(null,i);
					apply();
				}
			}

			var models = document.querySelectorAll("[ng-model]");
			for(var i = 0; i < models.length; i++){
				models[i].onkeyup = function(){
					var expr = this.getAttribute("ng-model");
					window[expr] = this.value;
					apply();
				}
			}
		}

		function apply(){
			var elms = document.querySelectorAll("[ng-bind],[ng-model]");
			for(var i = 0; i < elms.length; i++){
				var elm = elms[i];
				if(elm.type && elm.type == "text"){
					// console.log(elm);
					elm.value = count;
				}else{
					elm.innerHTML = count;
				}
				
			}
		}

		init();
	</script>
</body>
</html>